*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	background: pink;
	width: 100%;
	height: 100%;
}

body{
	width: 100%;
	height: 100%;
}

/*�����������ʽ*/
.wrap {
	width: 400px;
	height: 400px;
	position: absolute;
	background-color: bisque;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
}

/*��������������ʽ*/
.cube {
	width: 100px;
	height: 100px;
	margin: 150px auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	-webkit-animation: rotate 8s infinite;
	animation-timing-function: linear;
}

@-webkit-keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}

	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

/*����С��������ʽ*/
.cube span {
	display: bloack;
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: transparent;
	border: 1px solid #04387F;
	box-shadow: 0px 3px 16px 0px rgba(0, 55, 124, 0.3);
}

.cube .in_front {
	transform: rotateY(0deg) translateZ(51px);
}

.cube .in_back {
	transform: rotateY(180deg) translateZ(51px);
}

.cube .in_left {
	transform: rotateY(90deg) translateZ(51px);
}

.cube .in_right {
	transform: rotateY(-90deg) translateZ(51px);
}

.cube .in_top {
	transform: rotateX(90deg) translateZ(51px);
}

.cube .in_bottom {
	transform: rotateX(-90deg) translateZ(51px);
}

/* 圆环 */
.round{
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0px;
	left: 0px;
	border: 2px solid #04387F;
	border-radius: 50%;
	/* transform: skewX(30deg) skewY(30deg); */
	transform: skewX(-30deg) skewY(3deg);
	box-shadow: 0px 3px 16px 0px rgba(0, 55, 124, 0.3);
	background-image: url(../image/1.jpg);
	opacity: 0.6;
	animation: rotation 10s linear infinite;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: skewX(30deg) skewY(-3deg) rotate(0deg);
    }
    to {
        -webkit-transform: skewX(30deg) skewY(-3deg) rotate(360deg);
    }
}